body {
    background-color: #f7f7f7;
}

header {
    display: flex;
    height: .45rem;
    background-color: #f7f7f7;
    align-items: center;
    padding: 0 .1rem;
    color: #d3079e;

    .city {
        position: relative;

        &::after {
            position: absolute;
            top: .07rem;
            right: -0.2rem;
            content: '';
            display: block;
            height: .1rem;
            border-top: .08rem solid #d3079e;
            border-right: .06rem solid transparent;
            border-left: .06rem solid transparent;
        }
    }

    .title {
        flex: 1;
        text-align: center;
        color: #000;
        font-size: .24rem;
        font-weight: bold;
    }

    .user {
        width: .24rem;
    }
}

.swiper-pagination-bullet-active {
    background: #e3dee1;
}

.nav1 {
    ul {
        display: flex;
        flex-wrap: wrap;

        li {
            width: 33.33%;
            padding: .04rem;
        }
    }
}

.nav2 {
    ul {
        display: flex;
        flex-wrap: wrap;
        border-top: .01rem solid #ccc;
        margin-top: .15rem;

        li {
            width: 25%;

            &:not(:nth-child(4n)) {
                border-right: .01rem solid #ccc;
            }

            border-bottom: .01rem solid #ccc;
        }
    }
}

.nav3 {
    margin-top: .14rem;

    ul {
        border-top: .01rem solid #ccc;
        border-bottom: .01rem solid #ccc;

        li {
            &:first-child {
                border-right: .01rem solid #ccc;
            }

            &:last-child {
                margin-top: -0.02rem;
                border-top: .01rem solid #ccc;
            }

            float: left;
            width: 50%;

        }
    }
}

.popActivity {
    margin-top: .15rem;

    p {
        background-color: #f1f1f1;
        line-height: .36rem;
        padding-left: .1rem;
    }

    ul {
        li {
            border-bottom: .01rem solid #ccc;
        }
    }
}

.tabBar {
    .tb_title {
        display: flex;
        justify-content: space-around;

        a {
            line-height: .45rem;

            &.active {
                border-bottom: .03rem solid #d3079e;
            }
        }
    }

    .tb_content {
        ul {
            li {
                margin-bottom: .15rem;
                border-bottom: .01rem solid #ccc;
                background-color: #fff;
            }
        }
    }
}

.loadmore {
    text-align: center;
    line-height: .3rem;
    border-bottom: .01rem solid #ccc;

    span {
        position: relative;

        &::after {
            content: '';
            display: block;
            position: absolute;
            top: .05rem;
            right: -.3rem;
            width: .06rem;
            height: .06rem;
            border-right: .02rem solid #000;
            border-bottom: .02rem solid #000;
            transform: rotate(45deg);
        }
    }
}

footer {
    line-height: .3rem;
    background-color: #d3079e;
    color: #fff;
    font-weight: bold;
    padding: 0 .1rem;
    display: flex;
    justify-content: space-between;
    span:nth-child(2){
        padding-left: .2rem;
        flex: 1;
    }
}